@import 'normalize.scss';
@import 'base.scss';

@function px2rem($px) {
  @return ($px / 32) * 1rem;
}

@mixin boxSize($width, $height) {
  width: px2rem($width);
  height: px2rem($height);
}

@mixin bg($url) {
  background: url($url) no-repeat center / 100% 100%;
}

@mixin boxCenter() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #ffece9;
  z-index: 3;

  .rider {
    position: absolute;
    @include boxSize(154, 121);
    background: url('../imgs/loading/rider_2.png') no-repeat center / 100% 100%;
    top: (233/32)*1rem;
    right: (108/32)*1rem;
  }

  .progress {
    position: absolute;
    width: (416/32)*1rem;
    height: (20/32)*1rem;
    background-color: #fc2e4d;
    border: 2px solid #373838;
    border-radius: (20/32)*1rem;
    left: 50%;
    top: (360/32)*1rem;
    transform: translateX(-50%);
  }

  .info {
    position: absolute;
    width: (220/32)*1rem;
    height: (28/32)*1rem;
    background: url('../imgs/loading/loading.png') no-repeat center / 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    top: (420/32)*1rem;
  }

  .logo {
    position: absolute;
    width: (162/32)*1rem;
    height: (39/32)*1rem;
    background: url('../imgs/loading/logo.png') no-repeat center / 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: (118/32)*1rem
  }

  .copyright {
    font-size: (24/32)*1rem;
    color: #e0979e;
    position: absolute;
    // left: 50%;
    // transform: translateX(-50%);
    width: 100%;
    text-align: center;
    bottom: (73/32)*1rem;
  }
}

.welcome {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: deepskyblue;
  z-index: 2;

  .title {
    width: (397/32)*1rem;
    height: (224/32)*1rem;
    position: absolute;
    top: (42/32)*1rem;
    background: url('../imgs/welcome/tiitle.png') no-repeat center / 100% 100%;
    left: 50%;
    margin-left: px2rem(-397/2);

    // transform: translateX(-50%);
    .hello {
      width: (70/32)*1rem;
      height: (75/32)*1rem;
      position: absolute;
      right: (8/32)*1rem;
      top: (20/32)*1rem;
      background: url('../imgs/welcome/hello.png') no-repeat center / 100% 100%;
    }
  }

  .cloud {
    width: (640/32)*1rem;
    height: (670/32)*1rem;
    background: url('../imgs/welcome/cloud.png') no-repeat center / 100% 100%;
    position: absolute;
    bottom: 0;
  }

  .bear-box {
    position: absolute;
    width: (167/32)*1rem;
    height: (279/32)*1rem;
    bottom: (346/32)*1rem;
    left: 50%;
    margin-left: px2rem(-167/2);

    // transform: translateX(-50%);
    .bear {
      width: 100%;
      height: 100%;
      background: url('../imgs/welcome/bear.png') no-repeat center / 100% 100%;
    }

    .smoke {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: (32/32)*1rem;
      background: url('../imgs/welcome/smoke.png') no-repeat center / 100% 100%;
    }
  }

  .trees {
    position: absolute;
    bottom: (352/32)*1rem;
    width: (599/32)*1rem;
    height: (71/32)*1rem;
    left: 50%;
    margin-left: px2rem(-599/2);
    // transform: translateX(-50%);
    background: url('../imgs/welcome/trees.png') no-repeat center / 100% 100%;
  }

  .grass1 {
    position: absolute;
    bottom: 0;
    width: (640/32)*1rem;
    height: (396/32)*1rem;
    background: url('../imgs/welcome/grass1.png') no-repeat center / 100% 100%;
  }

  .grass2 {
    position: absolute;
    bottom: 0;
    width: (640/32)*1rem;
    height: (228/32)*1rem;
    background: url('../imgs/welcome/grass2.png') no-repeat center / 100% 100%;
  }

  .circle-btn-box {
    width: (208/32)*1rem;
    height: (208/32)*1rem;
    position: absolute;
    bottom: (85/32)*1rem;
    left: 50%;
    margin-left: px2rem(-208/2);
    // transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;

    .circle1 {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('../imgs/welcome/circle1.png') no-repeat center / 100% 100%;
    }

    .circle2 {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url('../imgs/welcome/circle2.png') no-repeat center / 100% 100%;
    }

    .btn {
      position: absolute;
      width: 50%;
      height: 50%;
      background: url('../imgs/welcome/btn.png') no-repeat center / 100% 100%;
    }
  }
}

.swiper-container {
  height: 100%;

  .swiper-wrapper {
    height: 100%;

    .swiper-slide {
      height: 100%;
    }
  }
}

.page1 {
  background: #BE8651;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .slide-page1 {
    .bg {
      position: absolute;
      @include bg('../imgs/page22/bg1.png');
      @include boxSize(576, 573);
      bottom: px2rem(252);
      left: 50%;
      margin-left: px2rem(-576/2);
      // transform: translateX(-50%);
    }

    .person {
      // @include boxCenter();
      @include boxSize(439, 349);
      @include bg('../imgs/page22/front1.png');
      bottom: px2rem(290);
      z-index: 1;
      position: absolute;
      left: 50%;
      margin-left: px2rem(-439/2);

      .papers {
        position: absolute;
        @include boxSize(115, 114);
        bottom: px2rem(104);

        .paper1 {
          position: absolute;
          bottom: 0;
          @include boxSize(85, 50);
          background-image: url('../imgs/page22/papers.png');
          // background-repeat: no-repeat;
          background-size: px2rem(115) px2rem(114);
          background-position: px2rem(85) px2rem(50);
        }

        .paper2 {
          position: absolute;
          bottom: px2rem(45);
          left: px2rem(-70);
          @include boxSize(86, 26);
          background-image: url('../imgs/page22/papers.png');
          // background-repeat: no-repeat;
          background-size: px2rem(115) px2rem(114);
          background-position: px2rem(0) px2rem(-32);
        }

        .paper3 {
          position: absolute;
          bottom: px2rem(80);
          right: px2rem(0);
          @include boxSize(64, 20);
          background-image: url('../imgs/page22/papers.png');
          // background-repeat: no-repeat;
          background-size: px2rem(115) px2rem(114);
          background-position: px2rem(-45) px2rem(0);
        }
      }
    }

    .sphere {
      @include boxSize(640, 356);
      @include bg('../imgs/page22/sphere1.png');
      position: absolute;
      bottom: 0;
    }

    .message-container {
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      @include boxSize(363, 119);
      @include bg('../imgs/page22/txt-bubbl.png');
      position: absolute;
      bottom: px2rem(140);
      right: px2rem(140);

      .info {
        @include boxSize(220, 30);
        @include bg('../imgs/page22/txt-work.png');
      }
    }
  }

  .slide-page2 {
    .bg {
      // @include boxCenter();
      @include bg('../imgs/page22/bg2.png');
      @include boxSize(582, 520);
      bottom: px2rem(252);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-582/2);
    }

    .person {
      // @include boxCenter();
      @include boxSize(436, 332);
      position: absolute;
      margin-left: px2rem(-436/2);
      @include bg('../imgs/page22/relax.png');
      bottom: px2rem(290);
      left: 50%;
      z-index: 1;

      .leg1 {
        position: absolute;
        @include boxSize(113, 24);
        left: px2rem(195);
        bottom: px2rem(110);
        @include bg('../imgs/page22/leg1.png');
      }

      .leg2 {
        position: absolute;
        @include boxSize(85, 71);
        left: px2rem(193);
        bottom: px2rem(120);
        @include bg('../imgs/page22/leg2.png');
      }
    }

    .sphere {
      @include boxSize(640, 356);
      @include bg('../imgs/page22/sphere1.png');
      position: absolute;
      bottom: 0;
    }

    .message-container {
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2;
      @include boxSize(363, 119);
      @include bg('../imgs/page22/txt-bubbl.png');
      position: absolute;
      bottom: px2rem(140);
      right: px2rem(140);

      .info {
        @include boxSize(220, 30);
        @include bg('../imgs/page22/txt-life.png');
      }
    }
  }

  .slide-page3 {
    .bg {
      // @include boxCenter();
      @include bg('../imgs/page22/bg3.png');
      @include boxSize(561, 516);
      bottom: px2rem(270);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-561/2);
    }

    .person {
      // @include boxCenter();
      @include bg('../imgs/page22/person.png');
      @include boxSize(503, 229);
      bottom: px2rem(300);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-503/2);
      z-index: 1;

      .word1 {
        @include bg('../imgs/page22/word1.png');
        position: absolute;
        @include boxSize(92, 83);
        left: px2rem(7);
        bottom: px2rem(194);
      }

      .word2 {
        @include bg('../imgs/page22/word2.png');
        position: absolute;
        @include boxSize(77, 70);
        left: px2rem(115);
        bottom: px2rem(240);
      }

      .word3 {
        @include bg('../imgs/page22/word3.png');
        position: absolute;
        @include boxSize(115, 104);
        right: px2rem(115);
        bottom: px2rem(220);
      }

      .word4 {
        @include bg('../imgs/page22/word4.png');
        position: absolute;
        @include boxSize(79, 73);
        right: px2rem(12);
        bottom: px2rem(230);
      }
    }

    .sphere {
      @include boxSize(640, 356);
      @include bg('../imgs/page22/sphere1.png');
      position: absolute;
      bottom: 0;
    }

    .message-container {
      display: flex;
      justify-content: center;
      align-items: center;
      @include boxSize(363, 119);
      @include bg('../imgs/page22/txt-bubbl.png');
      position: absolute;
      bottom: px2rem(140);
      right: px2rem(140);

      .info {
        @include boxSize(220, 30);
        @include bg('../imgs/page22/txt-res.png');
      }
    }
  }

  .bear {
    @include boxSize(178, 134);
    @include bg('../imgs/page22/bear1.png');
    position: absolute;
    bottom: px2rem(0);
    right: px2rem(38);
  }
}

.page2 {
  background: #EE4143;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .bg {
    @include bg('../imgs/page33/bg4_.png');
    // @include boxCenter();
    position: absolute;
    left: 50%;
    margin-left: px2rem(-592/2);
    @include boxSize(592, 490);
    bottom: px2rem(330);
  }

  .baer {
    background-image: url('../imgs/page33/bear2.png');
    background-size: px2rem(368) px2rem(427);
    background-position: px2rem(-103) px2rem(-96);
    // @include boxCenter();
    @include boxSize(227, 336);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-227/2);
    bottom: px2rem(310);

    .face1 {
      @include bg('../imgs/page33/face1.png');
      position: absolute;
      @include boxSize(102, 102);
      top: px2rem(0);
      left: px2rem(-102);
    }

    .face2 {
      @include bg('../imgs/page33/face2.png');
      position: absolute;
      @include boxSize(102, 102);
      top: px2rem(-102);
      right: px2rem(-102/2);
    }

    .hand-left {
      @include bg('../imgs/page33/hand-left_.png');
      position: absolute;
      @include boxSize(74, 77);
      top: px2rem(182);
      left: px2rem(30);
    }

    .hand-right {
      @include bg('../imgs/page33/hand-right.png');
      position: absolute;
      @include boxSize(74, 77);
      top: px2rem(182);
      right: px2rem(30);
    }
  }

  .table {
    @include bg('../imgs/page33/table.png');
    // @include boxCenter();
    @include boxSize(514, 258);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-514/2);
    bottom: px2rem(140);
    z-index: 1;
  }

  .food {
    @include bg('../imgs/page33/foods.png');
    @include boxSize(354, 152);
    // @include boxCenter();
    position: absolute;
    left: 50%;
    margin-left: px2rem(-354/2);
    bottom: px2rem(330);
    z-index: 1;
  }

  .sphere {
    @include boxSize(640, 356);
    @include bg('../imgs/page33/sphere2.png');
    position: absolute;
    bottom: 0;
  }
}

.page3 {
  background: #DD8A03;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .bg {
    @include bg('../imgs/page44/bg5.png');
    // @include boxCenter();
    position: absolute;
    left: 50%;
    margin-left: px2rem(-590/2);
    @include boxSize(592, 580);
    bottom: px2rem(330);
  }

  .bear {
    @include bg('../imgs/page44/bear3.png');
    // @include boxCenter();
    @include boxSize(206, 321);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-206/2);
    bottom: px2rem(195);
    z-index: 1;
  }

  .animation-bear-box {
    .bear1 {
      @include bg('../imgs/page44/bear3-1-1.png');
      // @include boxCenter();
      @include boxSize(251, 335);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-251/2);
      bottom: px2rem(195);
      z-index: 1;
    }

    .bear2 {
      @include bg('../imgs/page44/bear3-2-1.png');
      // @include boxCenter();
      @include boxSize(215, 313);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-215/2);
      bottom: px2rem(195);
      z-index: 1;
    }

    .bear3 {
      @include bg('../imgs/page44/bear3-3-1.png');
      // @include boxCenter();
      @include boxSize(290, 321);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-290/2);
      bottom: px2rem(195);
      z-index: 1;
    }
  }

  .hit-box {
    .card1 {
      @include bg('../imgs/page44/license1.png');
      @include boxSize(228, 151);
      position: absolute;
      left: px2rem(40);
      bottom: px2rem(500);
    }

    .card2 {
      @include bg('../imgs/page44/oil1.png');
      @include boxSize(231, 165);
      position: absolute;
      left: 50%;
      margin-left: px2rem(-231/2);
      bottom: px2rem(660);
    }

    .card3 {
      @include bg('../imgs/page44/evil21.png');
      @include boxSize(211, 173);
      position: absolute;
      right: px2rem(30);
      bottom: px2rem(480);
    }
  }

  .license {
    @include bg('../imgs/page44/license.png');
    @include boxSize(197, 140);
    position: absolute;
    left: px2rem(40);
    bottom: px2rem(500);
  }

  .oil {
    @include bg('../imgs/page44/oil.png');
    // @include boxCenter();
    position: absolute;
    left: 50%;
    margin-left: px2rem(-205/2);
    @include boxSize(205, 107);
    bottom: px2rem(660);
  }

  .evil {
    @include bg('../imgs/page44/evil2.png');
    @include boxSize(198, 163);
    position: absolute;
    right: px2rem(30);
    bottom: px2rem(480);
  }

  .sphere {
    @include boxSize(640, 356);
    @include bg('../imgs/page44/sphere3.png');
    position: absolute;
    bottom: 0;
  }
}

.page4 {
  background: #3FAA00;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .bg {
    @include bg('../imgs/page55/bg6.png');
    // @include boxCenter();
    @include boxSize(588, 333);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-588/2);
    bottom: px2rem(300);
  }

  .bear {
    @include bg('../imgs/page55/bear4.png');
    position: absolute;
    @include boxSize(309, 325);
    bottom: px2rem(170);
    left: px2rem(200);
    z-index: 1;
  }

  .card1 {
    @include bg('../imgs/page55/card1.png');
    @include boxSize(160, 175);
    position: absolute;
    left: px2rem(32);
    bottom: px2rem(435);
  }

  .card2 {
    @include bg('../imgs/page55/card2.png');
    // @include boxCenter();
    @include boxSize(161, 209);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-161/2);
    bottom: px2rem(530);
  }

  .card3 {
    @include bg('../imgs/page55/card3.png');
    @include boxSize(167, 184);
    position: absolute;
    right: px2rem(45);
    bottom: px2rem(420);
  }

  .sphere {
    @include boxSize(640, 356);
    @include bg('../imgs/page55/sphere4.png');
    position: absolute;
    bottom: 0;
  }
}

.page5 {
  background: #0098CF;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .bg {
    @include bg('../imgs/page66/bg7.png');
    // @include boxCenter();
    @include boxSize(594, 493);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-594/2);
    bottom: px2rem(300);
  }

  .bear {
    @include bg('../imgs/page66/rider2.png');
    // @include boxCenter();
    @include boxSize(230, 390);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-230/2);
    bottom: px2rem(175);
    z-index: 1;
  }

  .cloud {
    // @include boxCenter();
    @include bg('../imgs/page66/weather-cloud.png');
    @include boxSize(432, 160);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-432/2);
    bottom: px2rem(175+390+80);
  }

  .sphere {
    @include boxSize(640, 356);
    @include bg('../imgs/page66/sphere5.png');
    position: absolute;
    bottom: 0;
  }
}

.page6 {
  background: #B527A0;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .bg {
    @include bg('../imgs/page77/bg8.png');
    // @include boxCenter();
    @include boxSize(588, 333);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-588/2);
    bottom: px2rem(300);
  }

  .bear {
    @include bg('../imgs/page77/bear5.png');
    // @include boxCenter();
    @include boxSize(285, 328);
    position: absolute;
    left: 50%;
    margin-left: px2rem(-285/2);
    bottom: px2rem(200);
    z-index: 1;
  }

  .gif-box {
    position: absolute;
    top: 0;
    left: 50%;

    .gif1 {
      position: absolute;
      @include bg('../imgs/page77/gift1.png');
      @include boxSize(35, 29);
      left: 50%;
      margin-left: px2rem(-35 / 2);
      transform: rotateZ(29deg) translateY(px2rem(240));
    }

    .gif2 {
      position: absolute;
      @include bg('../imgs/page77/gift2.png');
      @include boxSize(93, 79);
      left: 50%;
      margin-left: px2rem(-93 / 2);
      transform: rotateZ(29deg * 2) translateY(px2rem(240));
    }

    .gif3 {
      position: absolute;
      @include bg('../imgs/page77/gift3.png');
      @include boxSize(72, 64);
      left: 50%;
      margin-left: px2rem(-72 / 2);
      transform: rotateZ(29deg * 3) translateY(px2rem(240));
    }

    .gif4 {
      position: absolute;
      @include bg('../imgs/page77/gift4.png');
      @include boxSize(91, 73);
      left: 50%;
      margin-left: px2rem(-91 / 2);
      transform: rotateZ(29deg * 4) translateY(px2rem(240));
    }

    .gif5 {
      position: absolute;
      @include bg('../imgs/page77/gift5.png');
      @include boxSize(99, 65);
      left: 50%;
      margin-left: px2rem(-99 / 2);
      transform: rotateZ(29deg * 5) translateY(px2rem(240));
    }

    .gif6 {
      position: absolute;
      @include bg('../imgs/page77/gift6.png');
      @include boxSize(107, 80);
      left: 50%;
      margin-left: px2rem(-107 / 2);
      transform: rotateZ(29deg * 6) translateY(px2rem(240));
    }

    .gif7 {
      position: absolute;
      @include bg('../imgs/page77/gift7.png');
      @include boxSize(107, 80);
      left: 50%;
      margin-left: px2rem(-107 / 2);
      transform: rotateZ(29deg * 7) translateY(px2rem(240));
    }

    .gif8 {
      position: absolute;
      @include bg('../imgs/page77/gift8.png');
      @include boxSize(88, 64);
      left: 50%;
      margin-left: px2rem(-88 / 2);
      transform: rotateZ(29deg * 8) translateY(px2rem(240));
    }

    .gif9 {
      position: absolute;
      @include bg('../imgs/page77/gift9.png');
      @include boxSize(78, 50);
      left: 50%;
      margin-left: px2rem(-78 / 2);
      transform: rotateZ(29deg * 9) translateY(px2rem(240));
    }

    .gif10 {
      position: absolute;
      @include bg('../imgs/page77/gift10.png');
      @include boxSize(49, 37);
      left: 50%;
      margin-left: px2rem(-49 / 2);
      transform: rotateZ(29deg * 10) translateY(px2rem(240));
    }

    .gif11 {
      position: absolute;
      @include bg('../imgs/page77/gift11.png');
      @include boxSize(51, 31);
      left: 50%;
      margin-left: px2rem(-51 / 2);
      transform: rotateZ(29deg * 11) translateY(px2rem(240));
    }

    .gif12 {
      position: absolute;
      @include bg('../imgs/page77/gift12.png');
      @include boxSize(37, 23);
      left: 50%;
      margin-left: px2rem(-37 / 2);
      transform: rotateZ(29deg * 12 - 10deg) translateY(px2rem(240));
    }
  }

  .sphere {
    @include boxSize(640, 356);
    @include bg('../imgs/page77/sphere6.png');
    position: absolute;
    bottom: 0;
  }
}

.page7 {
  background: #19072A;

  .title {
    position: absolute;
    left: px2rem(32);
    top: px2rem(32);
    padding-left: px2rem(20);

    h3 {
      color: #fff;
      margin: 0;
      font-size: px2rem(64);
    }

    p {
      margin: 0;
      margin-top: px2rem(12);
      overflow: hidden;
      color: #fff;
      font-size: px2rem(24);
    }

    .line {
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #fff;
    }
  }

  .streetlight {
    @include boxSize(80, 448);
    @include bg('../imgs/page8/streetlight.png');
    position: absolute;
    left: px2rem(240);
    bottom: px2rem(300);

    .light {
      @include boxSize(437, 427);
      @include bg('../imgs/page8/lamplight.png');
      position: absolute;
      left: px2rem(-140);
      top: px2rem(10);
    }

    .motobike {
      position: absolute;
      @include boxSize(200, 137);
      @include bg('../imgs/page8/moto.png');
      bottom: 0.875rem;
      left: -4.09375rem;
    }
  }

  .bear {
    @include boxSize(276, 271);
    @include bg('../imgs/page8/bear6.png');
    @include boxCenter();
    bottom: px2rem(280);
    z-index: 1;
  }

  .share {
    @include boxSize(379, 113);
    @include bg('../imgs/page8/share.png');
    @include boxCenter();
    bottom: px2rem(140);
    z-index: 1;
  }

  .sphere {
    @include boxSize(640, 384);
    @include bg('../imgs/page8/sphere7.png');
    position: absolute;
    bottom: 0;
  }

  .info {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: px2rem(24);
    color: #b579d6;
    bottom: px2rem(70)
  }
}

//动画部分
//进度条动画
@keyframes steps {
  to {
    width: 100%;
  }
}

//熊开车晃动动画
@keyframes bearRide {
  0% {
    transform: translateX(px2rem(-26*0)) translateY(px2rem(-3))
  }

  10% {
    transform: translateX(px2rem(-26*1)) translateY(px2rem(3))
  }

  20% {
    transform: translateX(px2rem(-26*2)) translateY(px2rem(-3))
  }

  30% {
    transform: translateX(px2rem(-26*3)) translateY(px2rem(3))
  }

  40% {
    transform: translateX(px2rem(-26*4)) translateY(px2rem(-3))
  }

  50% {
    transform: translateX(px2rem(-26*5)) translateY(px2rem(3))
  }

  60% {
    transform: translateX(px2rem(-26*6)) translateY(px2rem(-3))
  }

  70% {
    transform: translateX(px2rem(-26*7)) translateY(px2rem(3))
  }

  80% {
    transform: translateX(px2rem(-26*8)) translateY(px2rem(-3))
  }

  90% {
    transform: translateX(px2rem(-26*9)) translateY(px2rem(3))
  }

  100% {
    transform: translateX(px2rem(-260)) translateY(px2rem(3))
  }
}

//调整样式
.loading {
  .progress {
    background: transparent;

    .step {
      height: 100%;
      position: absolute;
      right: 0;
      width: 20%;
      background-color: #fc2e4d;
      border-radius: (20/32)*1rem;
    }
  }
}

//触发动画
.loading.animate {
  .progress {
    .step {
      animation: steps 1.5s linear forwards;
    }
  }

  .rider {
    animation: bearRide 1.5s linear forwards;
  }
}

//welcome页动画
@keyframes grass1 {
  to {
    height: px2rem(396);
  }
}

@keyframes grass2 {
  from {
    transform: scale(2, 1);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes trees {
  from {
    transform: translateY(-200%)
  }

  80% {
    transform: translateY(10%);
    opacity: 1;
  }

  90% {
    transform: translateY(-10%);
    opacity: 1;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes btnApper {
  from {
    transform: scale(0, 0)
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg)
  }
}

@keyframes bearDown {
  from {
    transform: translateY(-100%)
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes upanddown {
  from {
    transform: translateY(-5%);
  }

  to {
    transform: none;
  }
}

@keyframes small2big {
  from {
    transform: scale(0, 0);
    opacity: 0;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes bearDisappear {
  from {
    opacity: 1;
  }

  to {
    transform: translateY(100%) scale(1.5, 1.5);
    opacity: 0;
  }
}

.welcome {
  .grass1 {
    height: px2rem(20);
  }

  .grass2 {
    opacity: 0;
  }

  .trees {
    opacity: 0;
  }

  .circle-btn-box {
    opacity: 0;
  }

  .bear-box {
    opacity: 0;
  }

  .title,
  .hello {
    opacity: 0;
  }
}

.welcome.animate {
  .grass1 {
    animation: grass1 .5s ease-in forwards;
  }

  .grass2 {
    animation: grass2 .5s .5s ease-in forwards;
  }

  .trees {
    animation: trees .5s 1s ease-in forwards;
  }

  .circle-btn-box {
    animation: btnApper .5s 1.5s ease-in forwards;
  }

  .circle2 {
    animation: rotate 1.5s 1.5s linear infinite;
  }

  .bear-box {
    animation: bearDown .5s 2s ease-in forwards;
  }

  .bear {
    animation: upanddown .5s 2.5s ease-in-out infinite;
  }

  .smoke {
    animation: small2big .5s 2.5s ease-in-out infinite;
  }

  .title {
    animation: bearDown .5s 3s forwards;
  }

  .hello {
    animation: small2big .5s 3.5s forwards;
  }
}

@keyframes right2left {
  from {
    transform: translateX(100%);
    opacity: 1;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes heightBigger {
  to {
    height: 100%;
  }
}

//由于所有的title部分的动画都是一样的结构
.title {
  h3 {
    opacity: 0;
  }

  p {
    opacity: 0;
  }

  .line {
    height: 0% !important;
  }
}

.swiper-slide.animate {
  .title {
    h3 {
      animation: right2left .5s forwards;
    }

    p {
      animation: right2left .5s .3s forwards;
    }

    .line {
      animation: heightBigger .5s .3s forwards;
    }
  }
}

@keyframes rotateInOut {
  0% {
    transform: rotateZ(90deg)
  }

  25% {
    transform: rotateZ(-5deg);
    opacity: 1;
  }

  30% {
    transform: rotateZ(0);
    opacity: 1;
  }

  65% {
    transform: rotateZ(0);
    opacity: 1;
  }

  70% {
    transform: rotateZ(5deg);
    opacity: 1;
  }

  100% {
    transform: rotateZ(-90deg);
    opacity: 0;
  }
}

@keyframes rotateInNotOut {
  0% {
    transform: rotateZ(90deg)
  }

  65% {
    transform: rotateZ(-5deg);
    opacity: 1;
  }

  100% {
    transform: rotateZ(0);
    opacity: 1;
  }
}

@keyframes runUpDownLeftRight {
  25% {
    transform: translateX(10%) translateY(0)
  }

  50% {
    transform: translateX(-10%) translateY(10%)
  }

  75% {
    transform: translateX(0%) translateY(-10%)
  }

  100% {
    transform: translateX(0) translateY(0)
  }
}

@keyframes left2Right2left {
  30% {
    transform: translateX(-100%)
  }

  60% {
    transform: translateX(100%)
  }

  100% {
    transform: none
  }
}

@keyframes rotateBack {
  from {}

  to {
    transform: none;
  }
}

//区域1中的轮播部分
.page1 {
  .slide-page1 {
    .bg {
      opacity: 0;
      transform-origin: 50% 200%;
    }

    .person {
      opacity: 0;
      transform-origin: 50% 200%;
    }

    .message-container {
      opacity: 0;
      transform-origin: right bottom;
    }
  }

  .slide-page2 {
    .bg {
      opacity: 0;
      transform-origin: 50% 200%;
    }

    .person {
      opacity: 0;
      transform-origin: 50% 200%;

      .leg2 {
        transform-origin: left bottom;
        transform: rotateZ(30deg);
      }
    }

    .message-container {
      opacity: 0;
      transform-origin: right bottom;
    }
  }

  .slide-page3 {
    .bg {
      opacity: 0;
      transform-origin: 50% 200%;
    }

    .person {
      opacity: 0;
      transform-origin: 50% 200%;
    }

    .message-container {
      opacity: 0;
      transform-origin: right bottom;
    }
  }
}

.page1.animate {
  .slide-page1 {
    .bg {
      animation: rotateInOut 1.5s forwards
    }

    .person {
      animation: rotateInOut 1.5s .2s forwards;

      .paper2 {
        animation: left2Right2left .5s infinite;
      }

      .paper3 {
        animation: left2Right2left .5s infinite;
      }
    }

    .message-container {
      animation: rotateInOut 1.5s .2s forwards
    }
  }

  .slide-page2 {
    .bg {
      animation: rotateInOut 1.5s 1.7s forwards
    }

    .person {
      animation: rotateInOut 1.5s 1.9s forwards;

      .leg2 {
        animation: rotateBack 1s 2s forwards;
      }
    }

    .message-container {
      animation: rotateInOut 1.5s 2.1s forwards
    }
  }

  .slide-page3 {
    .bg {
      animation: rotateInNotOut .5s 3.6s forwards
    }

    .person {
      animation: rotateInNotOut .5s 3.8s forwards
    }

    .message-container {
      animation: rotateInNotOut .5s 4.0s forwards
    }

    .word1 {
      animation: runUpDownLeftRight .5s infinite;
    }

    .word2 {
      animation: runUpDownLeftRight 1.5s infinite;
    }

    .word3 {
      animation: runUpDownLeftRight 1s infinite;
    }

    .word4 {
      animation: runUpDownLeftRight 1.2s infinite;
    }
  }
}

@keyframes bottom2Top {
  from {
    transform: translateY(100%)
  }

  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes small2big2small {
  from {
    transform: scale(0, 0)
  }

  95% {
    transform: scale(1.2, 1.2);
    opacity: 1;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes handShake {
  20% {
    transform: rotateZ(5deg)
  }

  40% {
    transform: rotateZ(-5deg)
  }

  60% {
    transform: rotateZ(5deg)
  }

  50% {
    transform: rotateZ(-5deg)
  }

  100% {
    transform: none
  }
}

//page2
.page2 {
  .bg {
    transform-origin: 50% 200%;
    opacity: 0;
  }

  .baer {
    opacity: 0;

    .face1 {
      opacity: 0;
    }

    .face2 {
      opacity: 0;
    }

    .hand-left {
      transform-origin: left top;
    }

    .hand-right {
      transform-origin: right top;
    }
  }

  .table {
    opacity: 0;
  }

  .food {
    opacity: 0;
  }
}

.page2.animate {

  .bg {
    animation: rotateInNotOut .5s forwards;
  }

  .baer {
    animation: bottom2Top .5s 1s forwards;

    .face1 {
      animation: small2big2small .5s 2s forwards;
    }

    .face2 {
      animation: small2big2small .5s 2s forwards;
    }

    .hand-left {
      animation: handShake 1s .5s infinite;
    }

    .hand-right {
      animation: handShake 1s .8s infinite;
    }
  }

  .table {
    animation: bearDown .5s .5s forwards;
  }

  .food {
    animation: bearDown .5s 1.5s forwards;
  }
}

//page3
.page3 {
  .bg {
    opacity: 0;
    transform-origin: 50% 200%;
  }

  .bear {
    opacity: 0;
  }

  .animation-bear-box {
    .bear1 {
      opacity: 0;
    }

    .bear2 {
      opacity: 0;
    }

    .bear3 {
      opacity: 0;
    }
  }

  .hit-box {

    .card1 {
      transition: all 1s;
      opacity: 0;
    }

    .card2 {
      transition: all 1s;
      opacity: 0;
    }

    .card3 {
      transition: all 1s;
      opacity: 0;
    }
  }

  .license {
    opacity: 0;
  }

  .oil {
    opacity: 0;
  }

  .evil {
    opacity: 0;
  }
}

.page3.animate {
  .bg {
    animation: rotateInNotOut .5s forwards;
  }

  .bear {
    animation: bearDown .5s .5s forwards
  }

  .license {
    animation: small2big2small 1s 1s forwards, runUpDownLeftRight .5s 1.5s infinite;
  }

  .oil {
    animation: small2big2small .5s .5s forwards, runUpDownLeftRight .5s 1.5s infinite;
  }

  .evil {
    animation: small2big2small .7s .7s forwards, runUpDownLeftRight .5s 1.5s infinite;
  }
}

//page4动画
.page4 {
  .bg {
    opacity: 0;
    transform-origin: 50% 200%;
  }

  .bear {
    opacity: 0;
  }

  .card1 {
    opacity: 0;
  }

  .card2 {
    opacity: 0;
  }

  .card3 {
    opacity: 0;
  }
}

.page4.animate {
  .bg {
    animation: rotateInNotOut .5s forwards;
  }

  .bear {
    animation: bottom2Top .5s .5s forwards;
  }

  .card1 {
    animation: small2big2small 1s 1s forwards;
  }

  .card2 {
    animation: small2big2small 1s 1s forwards;
  }

  .card3 {
    animation: small2big2small 1s 1s forwards;
  }
}

@keyframes snowAnimate {
  30% {
    transform: translateY(50%) translateX(100%)
  }

  60% {
    transform: translateY(150%) translateX(-5%)
  }

  100% {
    transform: translateY(500%) translateX(50%);
    opacity: 0;
  }
}

@keyframes rainAppear {
  50% {
    transform: translateY(50%) translateX(-10%);
    opacity: .8;
  }

  100% {
    transform: none;
    opacity: 0;
  }
}

//page5动画
.page5 {
  .bg {
    opacity: 0;
    transform-origin: 50% 200%;
  }

  .bear {
    opacity: 0;
  }

  .cloud {

    // opacity: 0;
    .snow {
      position: absolute;
      @include bg('../imgs/page66/snow-piece.png');
      @include boxSize(32, 32);
    }

    .snow:nth-child(1) {
      bottom: px2rem(-60);
    }

    .snow:nth-child(2) {
      bottom: px2rem(-75);
      left: px2rem(50);
    }

    .snow:nth-child(3) {
      bottom: px2rem(-90);
      left: px2rem(105);
    }

    .snow:nth-child(4) {
      bottom: px2rem(-110);
      left: px2rem(60);
    }

    .snow:nth-child(5) {
      bottom: px2rem(-155);
      left: px2rem(55);
    }

    .rain {
      position: absolute;
      @include bg('../imgs/page66/rain9.png');
      @include boxSize(434, 379);
      right: 0;
      bottom: -11.84375rem;
    }
  }
}

.page5.animate {
  .bg {
    animation: rotateInNotOut .5s forwards;
  }

  .bear {
    animation: bottom2Top .5s .5s forwards, upanddown .5s 1s infinite;
  }

  .cloud {
    animation: runUpDownLeftRight .7s infinite;

    .snow:nth-child(1) {
      animation: snowAnimate .5s infinite;
    }

    .snow:nth-child(2) {
      animation: snowAnimate .7s infinite;
    }

    .snow:nth-child(3) {
      animation: snowAnimate .9s infinite;
    }

    .snow:nth-child(4) {
      animation: snowAnimate 1.1s infinite;
    }

    .snow:nth-child(5) {
      animation: snowAnimate 1.5s infinite;
    }

    .rain {
      animation: rainAppear .5s infinite;
    }
  }
}

@keyframes giftAnimate {
  from {
    transform: none;
  }

  to {
    opacity: 1;
  }
}

.page6 {
  .bg {
    opacity: 0;
    transform-origin: 50% 200%;
  }

  .bear {
    opacity: 0;
  }

  .gif-box>div {
    opacity: 0;
  }
}

.page6.animate {
  .bg {
    animation: rotateInNotOut .5s forwards;
  }

  .bear {
    animation: bottom2Top .5s .5s forwards;
  }

  .gif-box>div {
    animation: giftAnimate 1.5s 1s infinite;
  }
}